介绍
canvas vs svg
- canvas 适用于动态创建的位图,缩放失真。
- svg 适用于静态描述的矢量图,缩放不失真。
- canvas 基于”状态”绘制图形,譬如,strokeStyle、fillStyle、lineWidth等
- svg基于dom,可以直接在html中展示
绘图四步骤
- 定义canvas,设置width,height属性,设置变形等特效
- 获取canvas 2D context,绘制图形
- 添加动画
- 添加交互
canvas w3c坐标系
canvas width\height设置
1 2 3
| const dom = document.getElementById('canvas'); dom.width = window.innerWidth; dom.height = window.innerHeight;
|
1
| <canvas id="canvas" width="600" height="700"></canvas>
|
canvas 文本
strokeText
1 2 3 4 5 6
| const str = '学习hello world'; ctx.font = 'bold 30px 微软雅黑'; # font = "font-style font-weight font-size font-family"
ctx.strokeStyle = 'red'; ctx.strokeText(str,100,100,100);
|
fillText
1 2 3 4 5
| const str = '学习hello world'; ctx.font = 'bold 30px 微软雅黑';
ctx.fillStyle = 'blue'; ctx.fillText(str,200,100,100);
|
measureText
1 2 3 4 5 6 7 8
| const text = ctx.measureText(str); const width = text.width;
//居中 const canvasWidth = dom.width; const position = (canvasWidth - width) /2; ctx.strokeText(str,position,300,100);
|
textAlign
1 2
| #textAlign 控制文本延伸方向;left/start 向右;right/end向左 ctx.textAlign = 'end';
|
本文作者:前端analysis
版权声明: 本文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!
若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏